<template>
  <div>
    <el-upload
      class="upload-demo"
      :list-type="type == 'img' ? 'picture-card' : 'menu'"
      action="https://shalong.taiyanyue.top/api/common/OSSFileUpload"
      :on-success="handleImgUpload"
      :file-list="imgList"
      multiple
      :limit="limit"
      :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    >
      <span v-if="type == 'img'"> {{ imgList.length }}/{{ limit }} </span>
      <template v-if="limit && type != 'img'">
        <el-button type="primary">上传</el-button>
      </template>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img v-if="isWhat(dialogImageUrl) == 'image'" style="width: 100%;" w-full :src="dialogImageUrl" alt="Preview Image" />
      <video v-if="isWhat(dialogImageUrl) == 'video'" style="width: 100%;" :src="dialogImageUrl" controls></video>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: "img",
    },
    imgFile: {
      type: String,
      default: "",
    },
    limit: {
      type: Number,
      default: 9,
    },
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      imgList: [],
    };
  },
  mounted() {
    if (this.imgFile != "") {
      const arr = this.imgFile.split(",");
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        this.imgList.push({ path: element, url: element,name: element });
      }
    }
  },
  methods: {
    isWhat(url){
    if (!url || typeof url !== 'string') return 'unknown';
  
  // 提取文件扩展名
  const extension = url.split('.').pop().split(/[#?]/)[0].toLowerCase();
  
  // 视频文件扩展名
  const videoExtensions = [
    'mp4', 'webm', 'ogg', 'mov', 'avi', 'wmv', 'flv', 'mkv', '3gp', 'mpeg', 'mpg'
  ];
  
  // 音频文件扩展名
  const audioExtensions = [
    'mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a', 'wma', 'opus'
  ];
  
  // PDF文件扩展名
  const pdfExtensions = ['pdf'];
  
  // 图片文件扩展名
  const imageExtensions = [
    'jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'tiff', 'ico'
  ];
  
  // 文本文件扩展名
  const textExtensions = [
    'txt', 'csv', 'json', 'xml', 'html', 'htm', 'css', 'js', 'md', 'log'
  ];
  
  // 压缩文件扩展名
  const archiveExtensions = [
    'zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'iso', 'dmg'
  ];
  
  if (videoExtensions.includes(extension)) {
    return 'video';
  }
  if (audioExtensions.includes(extension)) {
    return 'audio';
  }
  if (pdfExtensions.includes(extension)) {
    return 'pdf';
  }
  if (imageExtensions.includes(extension)) {
    return 'image';
  }
  if (textExtensions.includes(extension)) {
    return 'text';
  }
  if (archiveExtensions.includes(extension)) {
    return 'archive';
  }
  
  return 'unknown';
},
    handlePictureCardPreview(uploadFile) {
      this.dialogImageUrl = uploadFile.url ? uploadFile.url : uploadFile.path;
      this.dialogVisible = true;
    },
     handleRemove (uploadFile, fileList)  {
   const result = fileList
        .map((f) =>
          f.response?.content?.path ? f.response?.content?.path : f.url
        )
        .join(",");
      this.$emit("change", result);
      this.imgList = fileList;
},
    handleImgUpload(response, file, fileList) {
      const result = fileList
        .map((f) =>
          f.response?.content?.path ? f.response?.content?.path : f.url
        )
        .join(",");
      this.$emit("change", result);
      this.imgList = fileList;
    },
  },
};
</script>
<style lang="scss" scoped></style>
